<template>
    <div>
			<Tables 
			:title = "computTitle()"  
			:field = 'field' 
			:butns="butns" 
			:tableData ='tableData' 
			:perNum='per_num' 
			:totalNum="total_num" 
			:rankable ="true" 
			:animateShow = "animate_show"
			:tableNotice="$t('realTime.tableNotice1')"	
			:pageSize='pageSize'
			@changePageSize = 'changePageSize'
			@clearInterval="ClearInterval"
			@loadData ="getData" 
			@clearSession ="clearModal" 
			@rankData = "rankData"
		>
			<div slot="filter">
				<roadbtns  @setData = "roadData"></roadbtns>
			</div>
		</Tables>
		<Modals 
		  :id ="'modal'" 
		  :title ="this.$t('realTime.userbuts1')"  
		  :status = "status" 
		  :errorMsg="errorMsg"
			@sentErrorMsg = "getErrorMsg" 
		  @modalEvent ="clearSession">
			<div slot="add_edit">
				<p style="font-size: 16px;">{{this.$t('realTime.userModalsure')}}</p>
			</div>
		</Modals>
    </div>
</template>
<script>
import Tables from "components/common/Tables";
import Modals from "components/common/Modals";
import realTimeService from "services/realTimeService";
import indexService from "services/indexService";
import PageData from "libs/PageData";
import roadbtns from "./slots/roadbtns";
export default {
  components: {
    Tables,
    Modals,
    roadbtns
  },
  data() {
    return {
      title: this.$t("realTime.navBtn3"),
      butns: [
        {
          type: "other",
          name: this.$t("realTime.userbuts1"),
          icon: "/static/img/w_clear.png",
          class: "clearbutn",
          event: "clearSession"
        }
      ],
      field: [
        {
          type: "rank"
        },
        {
          type: "text",
          label: this.$t("realTime.userTableTh2"),
          name: "groupid"
        },
        {
          type: "text",
          label: this.$t("realTime.userTableTh3"),
          name: "gateway_ip"
        },
        {
          type: "text",
          label: this.$t("realTime.userTableTh4"),
          name: "mac"
        },
        {
          type: "none",
          label: this.$t("realTime.userTableTh5"),
          name: "desc",
          editable: true,
          regex: /^[\w\u4e00-\u9fa5]{0,16}$/
        },
        {
          type: "text",
          label: this.$t("realTime.userTableTh6"),
          name: "total_bytes"
        },
        {
          type: "text",
          label: this.$t("realTime.userTableTh7"),
          name: "up_speed"
        },
        {
          type: "text",
          label: this.$t("realTime.userTableTh8"),
          name: "down_speed"
        },
        {
          type: "text",
          label: this.$t("realTime.userTableTh9"),
          name: "connects"
        }
      ],
      tableData: [],
      per_num: 25,
      total_num: 1,
      pageSize: [10, 20, 40, 80],
      status: "",
      cur_page: 1,
      road: 0,
      param: "",
      animate_show: false,
      errorMsg: "",
      size: 10,
      order: "",
      by: "",
      groupid: ""
    };
  },
  created() {
    this.getData()
  },
  methods: {
    computTitle() {
      if (this.road == 0) {
        return `${this.title}/ ${this.$t("realTime.allroad")}`;
      } else {
        return `${this.title}/ ${this.$t("realTime.road")} ${this.road}`;
      }
    },
    ClearInterval(stats) {
      if(!stats) {
      } else {
        clearTimeout(this.intervalid)
      }
    },
    clearModal() {
      this.status = "";
      $("#modal").modal("show");
    },
    getErrorMsg(msg) {
      this.errorMsg = msg;
    },
    clearSession() {
      this.status = "ing";
      realTimeService.clearSession().then(res => {
        if (res.errcode === 0) {
          this.status = "ok";
          $("#modal").modal("hide");
          clearInterval(this.intervalid);
          this.getData();
        } else {
          this.status = "error";
          this.errorMsg = res.errorMessage;
        }
      });
    },
    changePageSize(nowpage, size) {
      this.cur_page = nowpage;
      this.size = size;
      clearInterval(this.intervalid);
      this.getData();
    },
    rankData(param) {
      this.order = param.order;
      this.by = param.by;
      clearInterval(this.intervalid);
      this.getData();
    },
    roadData(road) {
      this.groupid = road;
      clearInterval(this.intervalid);
      this.getData();
    },
    getData() {
      realTimeService
        .getUserMonitor(
          this.cur_page,
          this.size,
          this.order,
          this.by,
          this.groupid
        )
        .then(res => {
          if (res.errcode === 0) {
            this.tableData = res["11"].stats.map(item => {
              item.groupid = "线路" + item.groupid;
              item.total_bytes = this.overFlow(item.total_bytes);
              item.up_speed = this.convertFlow(item.up_speed);
              item.down_speed = this.convertFlow(item.down_speed);
              item.connects = String(item.connects);
              return item;
            });
            this.total_num = res["11"].count;
            clearInterval(this.intervalid);
            this.intervalid = setTimeout(() => {
              this.getData()
            }, 1000)
          } else {
            clearInterval(this.intervalid);
          }
        })
        .fail(res => {
          clearInterval(this.intervalid);
        });
    },
    convertFlow(bps) {
      let flow = "";
      if (bps < 1024) {
        flow = Math.ceil(bps) + " Bps";
      }
      if (bps >= 1024 && bps < 1024 * 1024) {
        flow = bps / 1024;
        flow = flow.toFixed(2) + " KBps";
      }
      if (bps >= 1024 * 1024 && bps < 1024 * 1024 * 1024) {
        flow = bps / 1024 / 1024;
        flow = flow.toFixed(2) + " MBps";
      }
      if (bps >= 1024 * 1024 * 1024) {
        flow = bps / 1024 / 1024 / 1024;
        flow = flow.toFixed(2) + " GBps";
      }
      return flow;
    },
    overFlow(bps) {
      let flow = "";
      if (bps < 1024) {
        flow = Math.ceil(bps) + " B";
      }
      if (bps >= 1024 && bps < 1024 * 1024) {
        flow = bps / 1024;
        flow = flow.toFixed(2) + " KB";
      }
      if (bps >= 1024 * 1024 && bps < 1024 * 1024 * 1024) {
        flow = bps / 1024 / 1024;
        flow = flow.toFixed(2) + " MB";
      }
      if (bps >= 1024 * 1024 * 1024) {
        flow = bps / 1024 / 1024 / 1024;
        flow = flow.toFixed(2) + " GB";
      }
      return flow;
    }
  },
  beforeDestroy() {
    clearInterval(this.intervalid);
  }
};
</script>
<style scoped>
.button {
  height: 20px;
  margin-right: 10px;
}
.active {
  background: #69b6ff;
  color: #ffffff;
}
.unactive {
  background: #e8e8e8;
  color: #444 !important;
}
</style>